
  <!-- Sidenav -->
  <nav class="navbar navbar-vertical fixed-left navbar-expand-md navbar-light bg-white" id="sidenav-main">
    <div class="container-fluid">
      <!-- Toggler -->
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#sidenav-collapse-main" aria-controls="sidenav-main" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <!-- Brand -->
      <a class="navbar-brand pt-0" href="/">
        <img src="/static/assets/img/brand/blue.png" class="navbar-brand-img" alt="Flask Argon Dashboard">
      </a>
      <!-- User -->
      <ul class="nav align-items-center d-md-none">
        <li class="nav-item dropdown">
          <a class="nav-link nav-link-icon" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <i class="ni ni-bell-55"></i>
          </a>
          <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right" aria-labelledby="navbar-default_dropdown_1">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <div class="dropdown-divider"></div>
            <a class="dropdown-item" href="#">Something else here</a>
          </div>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <div class="media align-items-center">
              <span class="avatar avatar-sm rounded-circle">
                <img alt="Image placeholder" src="/static/assets/img/theme/team-1-800x800.jpg">
              </span>
            </div>
          </a>
          <div class="dropdown-menu dropdown-menu-arrow dropdown-menu-right">
            <div class=" dropdown-header noti-title">
              <h6 class="text-overflow m-0">Welcome!</h6>
            </div>
            <a href="/profile.html" class="dropdown-item">
              <i class="ni ni-single-02"></i>
              <span>My profile</span>
            </a>
            <a href="/profile.html" class="dropdown-item">
              <i class="ni ni-settings-gear-65"></i>
              <span>Settings</span>
            </a>
            <div class="dropdown-divider"></div>
            <a href={{ url_for('logout') }} class="dropdown-item">
              <i class="ni ni-user-run"></i>
              <span>Logout</span>
            </a>
          </div>
        </li>
      </ul>
      <!-- Collapse -->
      <div class="collapse navbar-collapse" id="sidenav-collapse-main">
        <!-- Collapse header -->
        <div class="navbar-collapse-header d-md-none">
          <div class="row">
            <div class="col-6 collapse-brand">
              <a href="./index.html">
                <img src="/static/assets/img/brand/blue.png">
              </a>
            </div>
            <div class="col-6 collapse-close">
              <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#sidenav-collapse-main" aria-controls="sidenav-main" aria-expanded="false" aria-label="Toggle sidenav">
                <span></span>
                <span></span>
              </button>
            </div>
          </div>
        </div>
        <!-- Form -->
        <form class="mt-4 mb-3 d-md-none">
          <div class="input-group input-group-rounded input-group-merge">
            <input type="search" class="form-control form-control-rounded form-control-prepended" placeholder="Search" aria-label="Search">
            <div class="input-group-prepend">
              <div class="input-group-text">
                <span class="fa fa-search"></span>
              </div>
            </div>
          </div>
        </form>
        <!-- Navigation -->
        <ul class="navbar-nav">
{#        <li>#}
{#              <div class="dropdown">#}
{#                  <a class="nav-link dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">#}
{#                      <i class="ni ni-world text-black-50"></i>数据故事<br>（示例）#}
{#                  </a>#}
{#                  <div class="dropdown-menu dropdown-menu-right" style="right: 5px;" aria-labelledby="dropdownMenuLink">#}
{#    <a class="nav-link dropdown-item" href="/hurun">#}
{#              <i class="ni ni-tv-2 text-primary"></i> 故事一#}
{#            </a>#}
{#    <a class="nav-link dropdown-item" href="/select_start"><i class="ni ni-tv-2 text-primary"></i>故事二</a>#}
{#    <a class="nav-link dropdown-item" href="#"><i class="ni ni-tv-2 text-primary"></i>故事三</a>#}
{#  </div>#}
{#              </div>#}
{#        </li>#}
                <li class="nav-item">
            <a class="nav-link" href="/jiaohu">
              <i class="ni ni-planet text-blue"></i> python图表功能页面
            </a>
          </li>
        <li>
            <div class="dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="ni ni-world text-black-50"></i>数据故事人口老龄化
                </a>
                <div class="dropdown-menu dropdown-menu-right" style="right: 10px;" aria-labelledby="dropdownMenuLink">
                    <a class="nav-link dropdown-item" href="/word">
                        <i class="ni ni-tv-2 text-primary"></i> 总故事
                    </a>
                    <a class="nav-link dropdown-item" href="/word/1"><i class="ni ni-tv-2 text-primary"></i>第一部分</a>
                    <a class="nav-link dropdown-item" href="/word/2"><i class="ni ni-tv-2 text-primary"></i>第二部分</a>
                </div>
            </div>
        </li>
        <li class="nav-item">
            <div class="dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <i class="ni ni-bullet-list-67 text-red"></i>数据故事精准扶贫
                </a>
                <div class="dropdown-menu dropdown-menu-right" style="right: 10px;" aria-labelledby="dropdownMenuLink">
                    <a class="nav-link dropdown-item" href="/fpgy">
                        <i class="ni ni-tv-2 text-primary"></i> 总故事
                    </a>
                    <a class="nav-link dropdown-item" href="/fpgy/1"><i class="ni ni-tv-2 text-primary"></i>第一部分</a>
                    <a class="nav-link dropdown-item" href="/fpgy/2"><i class="ni ni-tv-2 text-primary"></i>第二部分</a>
                </div>
            </div>
          </li>
{#        <li class="nav-item">#}
{#            <a class="nav-link" href="/map.html">#}
{#              <i class="ni ni-world text-black-50"></i> 数据故事#}
{#            </a>#}
{#          </li>#}

{#        <li class="nav-item">#}
{#            <a class="nav-link" href="/icons.html">#}
{#              <i class="ni ni-planet text-blue"></i> 图标#}
{#            </a>#}
{#          </li>#}
        <li class="nav-item">
            <a class="nav-link" href="/profile.html">
              <i class="ni ni-single-02 text-yellow"></i> 用户资料
            </a>
          </li>

          {% if current_user.is_authenticated %}

          <li class="nav-item">
            <a class="nav-link" href={{ url_for('logout') }}>
              <i class="ni ni-key-25 text-info"></i> 注销
            </a>
          </li>

          {% else %}

          <li class="nav-item">
            <a class="nav-link" href={{ url_for('login') }}>
              <i class="ni ni-key-25 text-info"></i> 登录
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href={{ url_for('register') }}>
              <i class="ni ni-circle-08 text-pink"></i> 注册
            </a>
          </li>

          {% endif %}

        </ul>
        <!-- Divider -->
        <hr class="my-3">
        <!-- Heading -->
        <h6 class="navbar-heading text-muted">更多</h6>
        <!-- Navigation -->
        <ul class="navbar-nav mb-md-3">

          <li class="nav-item">
            <a class="nav-link" href="https://github.com/huangjieqi/python">
              <i class="ni ni-ui-04"></i> 源代码
            </a>
          </li>

{#          <li class="nav-item">#}
{#            <a class="nav-link" href="https://appseed.us/admin-dashboards/flask-dashboard-argon">#}
{#              <i class="ni ni-book-bookmark"></i> app资讯#}
{#            </a>#}
{#          </li>#}
{##}
          <li class="nav-item">
            <a class="nav-link" href="https://github.com/huangjieqi/python/blob/master/README.md/">
              <i class="ni ni-book-bookmark"></i> 技术文档
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="https://huangjieqi.gitee.io/">
              <i class="ni ni-spaceship"></i> 博客
            </a>
          </li>

          <li class="nav-item">
            <a class="nav-link" href="https://github.com/zhengxiaopingzxp/Interactive_Visualization_DataStory">
              <i class="ni ni-books"></i> 设计文档
            </a>
          </li>

        </ul>
      </div>
    </div>
  </nav>

